<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

</head>
<body>
<a href="#/home">加载appA</a>
<a href="#/index">加载appB</a>
<div id="app"></div>

<script src="../lib/umd/my-single-spa.js"></script>
<script>
  console.log('mySingleSpa:',mySingleSpa);

  (function(global){
    function loadScript(appName){
      const script = document.createElement('script');
      script.src = '/tutorial/' + appName + '.js';
      document.body.appendChild(script);
      return new Promise((resolve, reject) => {
        script.onload = function () {
          resolve(window[appName]);
          script.parentNode.removeChild(script);
        };
        script.onerror = reject;
      })
    }

    const mySingleSpa = global.mySingleSpa;

    /*mySingleSpa.registerApplication(
      //appName
      'appA'
      //loadFunction
      , (props) => {
        console.log('~~~props~~~:',props);
        const ctx = {
          container: null
        }
        const app = {
          bootstrap: function(){
            return Promise.resolve().then(()=>{
              console.log('bootstrapping');
              ctx.container = document.querySelector('#app')
            });
          },
          mount: function(){
            return Promise.resolve().then(()=>{
              console.log('mounting');
              ctx.container.innerHTML = 'hello world';
            })
          },
          unmount: function(){
            return Promise.resolve().then(()=>{
              console.log('unmounting')
              ctx.container.innerHTML = '';
            })
          }
        };
        return Promise.resolve(app);
      },
      //activityWhen
      function(location){
        // return true;
        return location.hash === '#/home';
      },
      //custom props 会传给loadFunction作为参数
      {
        diy:'ahhh'
      }
    );*/

    mySingleSpa.registerApplication('appA',
      () => loadScript('appA'),
      function (location) {
        return location.hash === '#/home'
      }
    );

    mySingleSpa.registerApplication('appB',
      () => loadScript('appB'),
      function (location) {
        return location.hash === '#/index'
      }
    );

    mySingleSpa.start()
  })(window)
</script>
</body>
</html>
